import { Text, View } from 'react-native'
import NavBar from "@/components/NavBar";
import tw from "twrnc";
import Icon from 'react-native-vector-icons/AntDesign';
import { router } from 'expo-router';
import * as SecureStore from 'expo-secure-store';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigation, NavigationProp } from '@react-navigation/native';
import Translate from '@/components/common/translation/Translate';

type RootStackParamList = {
    'language': { category: string };
    // 其他路由的参数类型
};


export default function Settings() {
    const navigation = useNavigation<NavigationProp<RootStackParamList>>();
    const { softwareLanguage, myLanguage } = useSelector((state: any) => state.MySettingSlice);

    const handleLogout = async () => {
        // 清除本地存储的用户信息
        await SecureStore.deleteItemAsync('token');
        await SecureStore.deleteItemAsync('phoneNumber')
        // 跳转到登录页面
        router.push('/(auth)');
    }

    return (
        <View style={tw`flex-1`}>
            <NavBar title="设置" rightElement={true} />
            <View style={tw`flex-row items-center justify-between  my-1.5 p-3`}>
                <View style={tw`flex-row items-center`}>
                    <Text>软件语言</Text>
                </View>
                <View style={tw`flex-row items-center`}>
                    <View style={tw`mx-1`}><Text>{softwareLanguage}</Text></View>
                    <Icon name="right" size={10} color="#A7ABAA"
                        style={tw`border rounded-full border-slate-300 p-1`}
                        onPress={() => {
                            navigation.navigate('language', { category: 'software' });
                        }}
                    />
                </View>
            </View>
            <View style={tw`flex-row items-center justify-between  my-1.5 p-3`}>
                <View style={tw`flex-row items-center`}>
                    <Text>我的语言</Text>
                </View>
                <View style={tw`flex-row items-center`}>
                    <View style={tw`mx-1`}><Text>{myLanguage}</Text></View>
                    <Icon name="right" size={10} color="#A7ABAA"
                        style={tw`border rounded-full border-slate-300 p-1`}
                        onPress={() => {
                            navigation.navigate('language', { category: 'my' });
                        }}
                    />
                </View>
            </View>
            <View style={tw`flex-row items-center justify-between  my-1.5 p-3`}>
                <View style={tw`flex-row items-center`}>
                    <Text>
                        <Translate i18nKey='blacklist'>
                        </Translate>
                    </Text>
                </View>
                <View style={tw`flex-row items-center`}>
                    <Icon name="right" size={10} color="#A7ABAA"
                        style={tw`border rounded-full border-slate-300 p-1`} />
                </View>
            </View>
            <View style={tw`flex-row items-center justify-between  my-1.5 p-3`}>
                <View style={tw`flex-row items-center`}>
                    <Text>聊天记录迁移</Text>
                </View>
                <View style={tw`flex-row items-center`}>
                    <Icon name="right" size={10} color="#A7ABAA"
                        style={tw`border rounded-full border-slate-300 p-1`} />
                </View>
            </View>
            <View style={tw`flex-row items-center justify-between  my-1.5 p-3`}>
                <View style={tw`flex-row items-center`}>
                    <Text>聊天记录迁移</Text>
                </View>
                <View style={tw`flex-row items-center`}>
                    <Icon name="right" size={10} color="#A7ABAA"
                        style={tw`border rounded-full border-slate-300 p-1`} />
                </View>
            </View>
            <View style={tw`flex-row items-center justify-between  my-1.5 p-3`}>
                <View style={tw`flex-row items-center`}>
                    <Text>账户安全</Text>
                </View>
                <View style={tw`flex-row items-center`}>
                    <Icon name="right" size={10} color="#A7ABAA"
                        style={tw`border rounded-full border-slate-300 p-1`} />
                </View>
            </View>
            <View style={tw`flex-row items-center justify-between  my-1.5 p-3`}>
                <View style={tw`flex-row items-center`}>
                    <Text>关于我们</Text>
                </View>
                <View style={tw`flex-row items-center`}>
                    <Icon name="right" size={10} color="#A7ABAA"
                        style={tw`border rounded-full border-slate-300 p-1`} />
                </View>
            </View>
            <View style={tw`flex-row items-center justify-between  my-1.5 p-3`}>
                <View style={tw`flex-row items-center`}>
                    <Text>广告合作</Text>
                </View>
                <View style={tw`flex-row items-center`}>
                    <Icon name="right" size={10} color="#A7ABAA"
                        style={tw`border rounded-full border-slate-300 p-1`} />
                </View>
            </View>
            <View style={tw`flex-row items-center justify-between  my-1.5 p-3`}>
                <View style={tw`flex-row items-center`}>
                    <Text>WorldTalk 文明公约</Text>
                </View>
                <View style={tw`flex-row items-center`}>
                    <Icon name="right" size={10} color="#A7ABAA"
                        style={tw`border rounded-full border-slate-300 p-1`} />
                </View>
            </View>
            <View style={tw`flex-row items-center justify-between  my-1.5 p-3`}>
                <View style={tw`flex-row items-center`}>
                    <Text>用户反馈</Text>
                </View>
                <View style={tw`flex-row items-center`}>
                    <Icon name="right" size={10} color="#A7ABAA"
                        style={tw`border rounded-full border-slate-300 p-1`} />
                </View>
            </View>
            <View style={tw`flex-row items-center justify-between  my-1.5 p-3`}>
                <View style={tw`flex-row items-center`}>
                    <Text>个性化推荐设置</Text>
                </View>
                <View style={tw`flex-row items-center`}>
                    <Icon name="right" size={10} color="#A7ABAA"
                        style={tw`border rounded-full border-slate-300 p-1`} />
                </View>
            </View>
            <View style={tw`flex-row items-center justify-between  my-1.5 p-3`}>
                <View style={tw`flex-row items-center`}>
                    <Text>清除缓存</Text>
                </View>
                <View style={tw`flex-row items-center`}>
                    <Icon name="right" size={10} color="#A7ABAA"
                        style={tw`border rounded-full border-slate-300 p-1`} />
                </View>
            </View>
            <View style={tw`flex-row items-center justify-between  my-1.5 p-3`}>
                <View style={tw`flex-row items-center`}>
                    <Text>青少年模式</Text>
                </View>
                <View style={tw`flex-row items-center`}>
                    <Icon name="right" size={10} color="#A7ABAA"
                        style={tw`border rounded-full border-slate-300 p-1`} />
                </View>
            </View>

            <View style={tw`flex-row items-center justify-center absolute bottom-5 left-0 right-0`}>
                <Text style={tw`text-center`} onPress={handleLogout}>退出登录</Text>
            </View>
        </View>
    )
}
